<template>
	<view class="order-item-wrap" @click="toDetail">
		<view class="header">
			<image :src="record.userAvatar" class="avatar" mode="aspectFill"></image>
			<text class="name">{{ record.nickname }}</text>
			<text class="status">{{ record.statusText }}</text>
		</view>
		<view class="order-line"></view>
		<view class="order-info">
			<image :src="record.lineImage" mode="aspectFill" class="order-image"></image>
			<view class="order-desc">
				<text class="order-nmame">{{ record.lineName }}</text>
				<text class="order-time">预约时间：{{ record.start_time }}</text>
			</view>
			<view class="order-price">
				<text class="prefix">￥</text>
				<text class="price-value">{{ record.order_price }}</text>
			</view>
		</view>
		<view class="order-line"></view>
		<view class="order-footer">
			<view class="btn-item" v-if="record.status === 1" @click.stop="cancelOrder(record.id)">
				<text>取消订单</text>
			</view>
			<!-- <view class="btn-item">
				<text>再来一单</text>
			</view>
			<view class="btn-item confirm">
				<text>立即评价</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			record: {
				type: Object,
			}
		},
		methods: {
			async confirmCancel(order_id) {
				const resp = await this.$request({
					url: "/Order/cancelOrder",
					data: { order_id },
				})
				const { code, msg } = resp
				this.$toast({ title: msg })
				if (code !== 1) return
				this.$emit('update', order_id)
			},
			cancelOrder(id) {
				uni.showModal({
					title: '温馨提示',
					content: '您确定要取消订单吗?',
					success: ev => {
						if (ev.cancel) return
						return this.confirmCancel(id)
					}
				})
			},
			toDetail() {
				const { id } = this.record
				uni.navigateTo({
					url: '/pages-bundle/guide-order-detail/guide-order-detail?id=' + id
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.order-item-wrap {
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #FFF;
		border-radius: 2rpx;

		.order-footer {
			display: flex;
			justify-content: flex-end;

			.btn-item {
				width: 144rpx;
				height: 48rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.26);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: rgba(0, 0, 0, 0.9);

				&.confirm {
					background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
					margin-left: 20rpx;
					color: rgba(0, 0, 0, 0.9);
				}
			}
		}

		.order-info {
			display: flex;

			.order-price {
				margin-left: auto;
				display: flex;
				align-items: flex-end;

				.price-value {
					height: 48rpx;
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.9);
					font-weight: bold;
					line-height: 48rpx;
				}

				.prefix {
					height: 40rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.9);
					line-height: 40rpx;
				}
			}

			.order-desc {
				margin-left: 16rpx;
				display: flex;
				flex-flow: column;

				.order-nmame {
					height: 44rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.9);
					line-height: 44rpx;
				}

				.order-time {
					height: 32rpx;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.6);
					line-height: 32rpx;
					margin-top: 10rpx;
				}

			}

			.order-image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}

		.order-line {
			background: #E5E6EB;
			width: 100%;
			height: 1px;
			margin: 16rpx 0;
		}

		.header {
			display: flex;
			align-items: center;

			.status {
				height: 40rpx;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.6);
				line-height: 40rpx;
				margin-left: auto;
			}

			.name {
				height: 44rpx;
				font-size: 28rpx;
				color: #1D2129;
				font-weight: bold;
				margin-left: 16rpx;
				line-height: 44rpx;
			}

			.avatar {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
			}
		}
	}
</style>